<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#wrap {
	width: 300px;
	height: 300px;
	border: 1px solid white;
	margin: 200px auto;
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(-30deg);
	animation: mymove 16s linear infinite alternate;
}

#wrap div {
	position: absolute;
	width: 300px;
	height: 300px;
}

img {
	width: 300px;
	height: 300px;
	box-shadow: 0 0 500px skyblue;
}

#div1 {
	transform: rotateY(0deg) translateZ(800px);
}

#div2 {
	transform: rotateY(36deg) translateZ(800px);
}

#div3 {
	transform: rotateY(72deg) translateZ(800px);
}

#div4 {
	transform: rotateY(108deg) translateZ(800px);
}

#div5 {
	transform: rotateY(144deg) translateZ(800px);
}

#div6 {
	transform: rotateY(180deg) translateZ(800px);
}

#div7 {
	transform: rotateY(216deg) translateZ(800px);
}

#div8 {
	transform: rotateY(252deg) translateZ(800px);
}

#div9 {
	transform: rotateY(288deg) translateZ(800px);
}

#div10 {
	transform: rotateY(324deg) translateZ(800px);
}
@keyframes mymove
{
0%{transform:rotateX(-20deg) rotateY(0deg)  translateZ(20px)}
50%{transform:rotateX(40deg) rotateY(360deg) translateZ(20px)}
100%{transform:rotateX(-40deg) rotateY(720deg) translateZ(20px)}
}
</style>
</head>
<body>
	<div id="wrap">
		<div id="div1">
			<img alt="" src="1.jpg">
		</div>
		<div id="div2">
			<img alt="" src="2.jpg">
		</div>
		<div id="div3">
			<img alt="" src="3.jpg">
		</div>
		<div id="div4">
			<img alt="" src="4.jpg">
		</div>
		<div id="div5">
			<img alt="" src="5.jpg">
		</div>
		<div id="div6">
			<img alt="" src="6.jpg">
		</div>
		<div id="div7">
			<img alt="" src="7.jpg">
		</div>
		<div id="div8">
			<img alt="" src="8.jpg">
		</div>
		<div id="div9">
			<img alt="" src="9.jpg">
		</div>
		<div id="div10">
			<img alt="" src="11.jpg">
		</div>
	</div>
</body>
</html>